<script setup lang="ts">
const props = defineProps<{
  avatar: string;
  name: string;
  time: Date;
  content: string;
  useful: number;
}>();
</script>

<template>
  <div class="grid gap-2 text-3.5 text-sys-layer-e">
    <div class="flex items-center gap-2">
      <img class="size-8 rounded-full object-fill" :src="props.avatar">
      <div class="mr-auto text-4 text-sys-text-body">
        {{ props.name }}
      </div>
      <i class="i-ri:more-2-fill text-5" />
    </div>
    <div class="flex items-center gap-1 text-3">
      <i v-for="i of 5" :key="i" class="i-ri:star-fill text-#01875F" />
      &nbsp;<span>{{ props.time.toLocaleDateString() }}</span>
    </div>
    <div>
      {{ props.content }}
    </div>
    <div>
      Essa avaliação foi marcada como útil por {{ props.useful }} pessoas
    </div>
    <div class="flex items-center gap-4">
      <span>Você achou isso útil?</span>
      <div class="border-(1 slate-100 solid) rounded-full px-6.5 py-2">
        Sim
      </div>
      <div class="border-(1 slate-100 solid) rounded-full px-6.5 py-2">
        Não
      </div>
    </div>
  </div>
</template>
